import React, {useEffect, useState} from 'react';
import {message, Skeleton} from "antd";
import ProForm, {ProFormText} from "@ant-design/pro-form";
import {getWebSite, updateSetting} from "@/services/setting";

const AliOss = () => {
  // 初始化数据状态
  const [InitialValues, setInitialValues] = useState(undefined)

  // 渲染数据
  useEffect(async () => {
    const resp = await getWebSite('alioss')
    setInitialValues({
      access_key: resp.accessKeyId,
      bucket: resp.bucket,
      domain_name: resp.endpoint,
      secret_key: resp.accessKeySecret,

    })
  }, [])

  // 执行更新
  const updataAliOss = async (value) => {
    const data = {
      name: 'alioss',
      accessKeyId: value.access_key,
      bucket: value.bucket,
      endpoint: value.domain_name,
      accessKeySecret: value.secret_key
    }
    const response = await updateSetting(data);
    if (response.status === undefined) {
      message.success('修改成功')
    }
  }

  return (
    <span>
      {
        InitialValues === undefined ?
          <Skeleton avatar paragraph={{rows: 4}}/>
          :
          <ProForm
            onFinish={(data) => updataAliOss(data)}
            initialValues={InitialValues}
            submitter={{
              searchConfig: {
                submitText: '提交',
              },
            }}
          >
            <ProFormText
              name="access_key"
              label="access_key"
              placeholder="请输入用户名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                },
              ]}
            />
            <ProFormText
              name="bucket"
              visibilityToggle={false}
              label="bucket"
              placeholder="请输入bucket"
            />
            <ProFormText
              name="domain_name"
              label="domain_name"
              placeholder="请输入domain_name"
              rules={[
                {
                  required: true,
                  message: '请输入domain_name',
                },
              ]}
            />
            <ProFormText
              name="secret_key"
              label="secret_key"
              placeholder="请输入secret_key"
              rules={[
                {
                  required: true,
                  message: '请输入secret_key',
                },
              ]}
            />
          </ProForm>
      }
            </span>
  );
};

export default AliOss;
